<template>
	<view class="container">
		<TopNav title="公告列表" :bg-color="topBGC"></TopNav>
		<view class="notice">

			<view class="notice-item" v-for="(item,index) in list" :key="item.id"
				@click="handleToNoticeDetail(item.id)">
				<view class="f-s15 text-cut overflow-hidden">
					<text>{{item.title}}</text>
				</view>
				<view class="m-t8 flex justify-between">
					<text class="text-gray f-s12">{{item.create_time}}</text>
					<view class="flex align-center">
						<text class="text-gray">查看详情</text>
						<image src="/static/images/index/more.png" class="width-16 height-16" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-tb-xs" v-if="total !== 0">
			<u-loadmore :status="loadmoreStatus" line @loadmore="handleScrollBottom" />
		</view>
		<Empty :show="total === 0"></Empty>
	</view>
</template>

<script>
	import {
		noticeList
	} from "@/api/index"
	import mixins from "@/mixins";
	import Empty from '@/components/empty/index.vue';
	export default {
		components: {
			Empty
		},
		mixins: [mixins],
		data() {
			return {
				topBGC: 'rgba(255,255,255,0)',
				list: [],
				queryParams: {
					status: 1, // 搭搭公告
					page: 1,
					limt: 10
				},
			};
		},
		onPageScroll(event) {
			let scrollTop = event.scrollTop
			// 计算透明度（0-1之间变化）
			// 这里设定当滚动超过100px时完全变为白色，你可以调整这个值
			let navbarOpacity = Math.min(scrollTop / 80, 1)
			this.topBGC = `rgba(255, 255, 255, ${navbarOpacity})`
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			this.handleScrollBottom()
		},
		methods: {
			// 跳转公告详情
			handleToNoticeDetail(id) {
				this.$tab.navigateTo('/pages/index/inside/noticeDetail?id=' + id)
			},
			// 获取公告列表
			getList() {
				noticeList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count
					this.pageTotal = total
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 32rpx 24rpx;

		.notice {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 24rpx 24rpx 32rpx 24rpx;
			box-sizing: border-box;

			.notice-item {
				margin-bottom: 48rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>